import React from 'react';
import { Link } from 'react-router-dom';


import styles from './index.module.less';

export default class Message extends React.Component {
  state={
    hotList: [
      { key: 1, title: '1.大量回收废铁,废铜,废铝,不锈钢等金属、电器。' },
      { key: 2, title: '1.大量回收废铁,废铜,废铝,不锈钢等金属、电器。' },
      { key: 3, title: '1.大量回收废铁,废铜,废铝,不锈钢等金属、电器。' },
      { key: 4, title: '1.大量回收废铁,废铜,废铝,不锈钢等金属、电器。' },
      { key: 5, title: '1.大量回收废铁,废铜,废铝,不锈钢等金属、电器。' },
      { key: 6, title: '1.大量回收废铁,废铜,废铝,不锈钢等金属、电器。' },
      { key: 7, title: '1.大量回收废铁,废铜,废铝,不锈钢等金属、电器。' },
      { key: 8, title: '1.大量回收废铁,废铜,废铝,不锈钢等金属、电器。' },
    ],
    keywordList: [
      { key: 1, title: '政策' },
      { key: 20, title: '政策' },
      { key: 3, title: '政策' },
      { key: 4, title: '政策' },
      { key: 5, title: '政策' },
      { key: 6, title: '政策' },
      { key: 7, title: '政策' },
      { key: 8, title: '政策' },
      { key: 9, title: '政策' },
    ],
  }
  render() {
    const { hotList, keywordList } = this.state;
    return (
      <React.Fragment>
        <div className={styles.content}>
          <div className={styles.title}>热门文章</div>
          <ul>
            {
              hotList.map((item, index) => {
                return (
                  <li key={item.key} className={styles.text}>
                    <Link to='/'>{item.title}</Link>
                  </li>
                );
              })
            }
          </ul>
        </div>
        <div className={styles.content + ' ' + styles.content2}>
          <div className={styles.title}>资讯推文</div>
          <ul>
            {
              hotList.map((item, index) => {
                return (
                  <li key={item.key} className={styles.text}>
                    <Link to='/'>{item.title}</Link>
                  </li>
                );
              })
            }
          </ul>
        </div>
        <div className={styles.content + ' ' + styles.content3}>
          <div className={styles.title}>热门关键词</div>
          {
            keywordList.map((item, index) => {
              return (
                <button key={item.key}>{item.title}</button>
              );
            })
          }
        </div>

      </React.Fragment>
    );
  }
}
